<!doctype html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Language" content="en" />
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#4188c9">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="./masonry.pkgd.js"></script>
	<script src="./imagesloaded.pkgd.js"></script>
	
    <title>图片社交网站</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
	<link href="./style.css" rel="stylesheet"  type="text/css"/>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
    <!--script src="./assets/js/dashboard.js"></script-->
    <!-- c3.js Charts Plugin -->
    <link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
    <!--script src="./assets/plugins/charts-c3/plugin.js"></script-->
    <!-- Google Maps Plugin -->
    <link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
    <!--script src="./assets/plugins/maps-google/plugin.js"></script-->
    <!-- Input Mask Plugin -->
    <!--script src="./assets/plugins/input-mask/plugin.js"></script-->
  </head>
  <body class="">
    <div class="page">
      <div class="page-main">
        <div class="header py-4">
          <div class="container">
              <div class="d-flex">
                  <a class="header-brand yz" href="./index">
                      <img src="./p/brand.png" class="header-brand-img">图片社交网站
                  </a>
                  <div class="d-flex order-lg-2 ml-auto user-div">
                      <a href="#" class="nav-link pr-0 leading-none user-a" data-toggle="modal" data-target="#LoginModal"><!-- 账户信息 -->
                          <span class="avatar" style="background-image: url(./p/faces/lh.jpg)"></span>
                          <span class="ml-2 d-none d-lg-block">
                               <span class="text-default">未登录</span>
                               <small class="text-muted d-block mt-1">点击登录</small>
                          </span>
                      </a>
                  </div>
                  <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
                      <span class="header-toggler-icon"></span>
                  </a>
              </div>
          </div>
        </div>
		<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="row">
		      <div class="col col-login mx-auto bcw">
		        <div class="text-center mb-6">
		          <img src="./assets/brand/tabler.svg" class="h-6" alt="">
		        </div>
				<div class="register-tab" style="display:table;background-color:#fff;border:1px solid rgba(0, 40, 100, 0.12);border-radius:3px;padding-left: 16px;padding-right:16px;">
					<div class="register-tab-item" style="padding: 16px;float:left;display:table-cell;"><a href="#login-content" tabindex="-1" data-toggle="tab">登录</a></div>
					<div class="register-tab-item" style="padding: 16px;float:left;display:table-cell;"><a href="#register-content" tabindex="-1" data-toggle="tab">注册</a></div>
					<div style="padding: 16px;float:right;display:table-cell;">
					    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					</div>
				</div>
				<div id="myTabContent" class="tab-content">
					<div class="tab-pane fade in active" id="login-content">
					<form class="card" action="" method="post">
					  <div class="card-body p-6">
						
					    <div class="card-title">登录</div>
						
					    <div class="form-group">
					      <label class="form-label">用户名</label>
					      <input type="text" class="form-control" id="login_username" aria-describedby="emailHelp" placeholder="account">
					    </div>
					    <div class="form-group">
					      <label class="form-label">
					        密码
					        <a href="./forgot-password.html" class="float-right small">忘记密码</a>
					      </label>
					      <input type="password" class="form-control" id="login_password" placeholder="Password">
					    </div>
					    <div class="form-group">
					      <label class="custom-control custom-checkbox">
					        <input type="checkbox" class="custom-control-input" />
					        <span class="custom-control-label">记住账号</span>
					      </label>
					    </div>
					    <div class="form-footer">
					      <button type="button" class="btn btn-primary btn-block" onclick="login()">登录</button>
					    </div>
					  </div>
					</form>
					</div>
					<div class="tab-pane fade in" id="register-content">
						<form class="card" id="registerform">
						  <div class="card-body p-6">
						    <div class="card-title">创建新账户</div>
						    <div class="form-group">
						      <label class="form-label">用户名</label>
						      <input type="text" class="form-control" id="user_name" placeholder="用户名">
						    </div>
							
							<div class="form-group">
							  <label class="form-label">邮箱</label>
							  <input type="email" class="form-control" id="email" placeholder="邮箱">
							</div>
						
						    <div class="form-group">
						      <label class="form-label">密码</label>
						      <input type="password" class="form-control" id="input_password" placeholder="密码">
						    </div>
							
							<div class="form-group">
							  <label class="form-label">确认密码</label>
							  <input type="password" class="form-control" id="comfirm_password" placeholder="确认密码">
							</div>
				
						    <div class="form-footer">
						      <button class="btn btn-primary btn-block" type="button" onclick="register();">创建</button>
						    </div>
						  </div>
						</form>
					</div>
		        </div>
		      </div>
		    </div>
		</div>
        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
              <div class="col-lg order-lg-first">
                  <div class="card-header">
                      <h1 class="card-title">个人主页</h1>
                  </div>

              </div>
            </div>
          </div>
        </div>
        <div class="my-3 my-md-5">
          <div class="container">
            <div class="row">
              <div class="col-lg-4">
                <div class="card card-profile">
                  <div class="card-header" style="background-image: url(p/photos/eberhard-grossgasteiger-311213-500.jpg);"></div>
                  <div class="card-body text-center">
                    <img class="card-profile-img" id="get_img" src="p/faces/lh.jpg">
                    <h3><span class="mb-3" id="get_name"></span></h3>

                  </div>
                </div>
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title"><i class="fe fe-user"> </i>详细介绍</h3>
                  </div>
                  <div class="card-body">
                    <form>

                      <div class="form-group">
                         <label class="form-label"><i class="fe fe-map-pin"> </i>邮箱</label>
                         <input type="text" class="form-control" id="get_email" value="your-email@domain.com" disabled="">
                      </div>
                      <div class="form-group">
                        <label class="form-label"><i class="fe fe-file-text"> </i>简介</label>
                        <textarea class="form-control" disabled="" id = "get_des" rows="5">文不能测字，武不能防身。</textarea>
                      </div>
                      <div class="form-group">
                        <label class="form-label"><i class="fe fe-map-pin"> </i>所在地</label>
                        <input type="text" class="form-control" value="重庆" id= "get_dep" disabled=""/>
                      </div>

                    </form>
                  </div>
                </div>
              </div>
              <div class="col-lg-8">
                <div class="card">
                    <div class="card-header" >
                        <h3 class="card-title" style="text-align: center; width:25%">
                            <a href="profile"target="_self" style="display: block"><i class="fa fa-pencil-square-o"> 修改信息</i></a></h3>
                        <h3 class="card-title" style="text-align: center;width: 25%;color: #0DB69F">
                            <a href="#" style="display: block"><i class="fa fa-image"> 我的相册</i></a> </h3>
                        <h3 class="card-title" style="text-align: center; width:25%">
                            <a href="follow" target="_self" style="display: block"><i class="fa fa-star-o"> 我的关注</i></a></h3>
                        <h3 class="card-title" style="text-align: center; width:25%">
                            <a href="like" target="_self" style="display: block"><i class="fa fa-thumbs-o-up"> 点赞记录</i></a></h3>
                    </div>
					<div class="card-body">
						<div class="container">
							<!--瀑布流-->
							<div class="grid"></div>
						</div>
					</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
          <div class="container">
              <div class="row">
                  <div class="col-lg-4 mt-4 mt-lg-0">
                      其它类似网站<br>Similar Websites
                  </div>
                  <div class="col-lg-8">
                      <div class="row">
                          <div class="col-6 col-md-3">
                              <ul class="list-unstyled mb-0">
                                  <li><a href="https://huaban.com/discovery/">花瓣网</a></li>
                                  <li><a href="https://tuchong.com/">图虫</a></li>
                              </ul>
                          </div>
                          <div class="col-6 col-md-3">
                              <ul class="list-unstyled mb-0">
                                  <li><a href="https://www.mihuashi.com/artworks">米画师</a></li>
                                  <li><a href="https://bcy.net/illust/toppost100">半次元</a></li>
                              </ul>
                          </div>
                          <div class="col-6 col-md-3">
                              <ul class="list-unstyled mb-0">
                                  <li><a href="http://www.lofter.com/">Lofter</a></li>
                                  <li><a href="https://pixabay.com/">pixabay</a></li>
                              </ul>
                          </div>
                          <div class="col-6 col-md-3">
                              <ul class="list-unstyled mb-0">
                                  <li><a href="http://artand.cn/works">Artand</a></li>
                                  <li><a href="http://www.poco.cn/works/works_list?classify_type=0&works_type=editor">POCO</a></li>
                              </ul>
                          </div>
                      </div>
                  </div>

              </div>
          </div>
      </div>
      <footer class="footer">
          <div class="container">
              <div class="row align-items-center flex-row-reverse">
                  <div class="col-auto ml-lg-auto">
                      <div class="row align-items-center">
                          <div class="col-auto">
                              <ul class="list-inline list-inline-dots mb-0">
                                  <li class="list-inline-item"><a href="./docs/index.html">Documentation</a></li>
                                  <li class="list-inline-item"><a href="./faq.html">FAQ</a></li>
                              </ul>
                          </div>
                          <div class="col-auto">
                              <a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source code</a>
                          </div>
                      </div>
                  </div>
                  <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
                      一个以图片为主要内容的社交网站  By Group 4.
                  </div>
              </div>
          </div>
      </footer>
    </div>
    <script type="text/template" id="user-info">
    	<div class="d-flex order-lg-2 ml-auto user-info">

    	   <div class="dropdown">
    	       <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown"><!-- 账户信息 -->
    	           <span class="avatar" style="background-image: url(./p/faces/lh.jpg)" id="userimg"></span>
    	       <span class="ml-2 d-none d-lg-block">
    	         <span class="text-default" id="username">李华</span>
    	         <small class="text-muted d-block mt-1" id="UID">Administrator</small>
    	       </span>
    	       </a>
    	       <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <!-- 下拉框 -->
    	           <a class="dropdown-item" href="profile" target="_self">
    	               <i class="dropdown-icon fe fe-user"></i> 个人信息
    	           </a>
    	           <a class="dropdown-item" href="follow" target="_self">
    	               <i class="dropdown-icon fe fe-star"></i> 我的关注
    	           </a>
    	           <a class="dropdown-item" href="like" target="_self">
    	               <i class="dropdown-icon fe fe-thumbs-up"></i> 点赞记录
    	           </a>
    	           <a class="dropdown-item" href="upload" target="_blank">
    	               <i class="dropdown-icon fe fe-upload"></i> 图片上传
    	           </a>
    	           <a class="dropdown-item" href="#">
    	               <i class="dropdown-icon fe fe-settings"></i> 设置
    	           </a>
    	           <a class="dropdown-item" href="#">
    	               <i class="dropdown-icon fe fe-send"></i> 消息
    	           </a>
    	           <div class="dropdown-divider"></div>
    	           <a class="dropdown-item" href="#">
    	               <i class="dropdown-icon fe fe-help-circle"></i> 帮助
    	           </a>
    	           <a class="dropdown-item" onclick="logout();">
    	               <i class="dropdown-icon fe fe-log-out"></i> 退出
    	           </a>
    	       </div>
    	   </div>
    	</div>
    </script>
    <script type="text/template" id="no-user">
    	<a href="#" class="nav-link pr-0 leading-none user-a" data-toggle="modal" data-target="#LoginModal"><!-- 账户信息 -->
    	    <span class="avatar" style="background-image: url(./p/faces/lh.jpg)"></span>
    	    <span class="ml-2 d-none d-lg-block">
    	         <span class="text-default">未登录</span>
    	         <small class="text-muted d-block mt-1">点击登录</small>
    	    </span>
    	</a>
    </script>
	<script type="text/text/template" id="waterfall-item">
		<div class="grid-item ani">
		    <a target="_blank" id="a-img">
				<img class="show-img">
			</a>
		</div>
	</script>	
    <script type="text/javascript">
		var user_ID = -1;
		isLogin();
		var grid = $('.grid').masonry({
		  // options
		  itemSelector: '.grid-item',
		  columnWidth: 225,
		  gutter: 10,
		  originLeft: true,
		  resize: true
		});
		
		function initPage()
		{
			$.ajax({
				method: "GET",
				url: "/api/userindex/" + user_ID,
				dataType: "json",
				}).done(function(result) {
					if(result.status === '0')
					{
						//document.getElementById('get_email').value=result.user_email
						//document.getElementById('get_des').value=result.user_des
						//document.getElementById('get_dep').value=result.user_dep
						//document.getElementById('get_name').innerHTML=result.user_name
						//document.getElementById('get_img').src=url(" + result.user_img + ")
						
						var userinfo = result['user'];
						console.log(userinfo);
						let user_img = $('#get_img');
						let name = $('#get_name');
						let email = $('#get_email');
						let description = $('#get_des');
						let dep = $('#get_dep')
						user_img.attr('src',userinfo['user_img'])
						name.text(userinfo['name']);
						email.val(userinfo['email']);
						if(userinfo['description'] == null)
						{
							description.val("你没有给自己填写华丽的简介哦(╯ω╰)");
						}
						else
						{
							description.val(userinfo['description']);
						}
						if(userinfo['department'] == null)
						{
							dep.val("暂未填写");
						}
						else
						{
							dep.val(userinfo['department']);
						}
						imgs = result['imgs'];
					    appendtoWF(imgs)
					}
				}).fail(function(result) {
					alert("登录失败，请重试");
			});
		}
		
		function appendtoWF(imgs)
		{
			let org = document.getElementById('waterfall-item');
			for(let i = 0; i<imgs.length; i++)
			{
				var node = $(org.cloneNode(true)).html();
				var parent = $('.grid')
				var pic = $(node);
				let img = pic.find('.show-img');
				let a_img = pic.find('#a-img');
				img.attr("src",imgs[i]['imgaddr']);
				a_img.attr('href','./seepicinfo/' + imgs[i]['tweet_id'])
				grid.append(pic).masonry('appended', pic);
			}
			grid.imagesLoaded().progress( function() {
			    grid.masonry('layout');
			});
			
		}
    	function isLogin()
    	{
    		$.ajax({
    			method: "GET",
    			url: "/islogin",
    			dataType: "json",
    			contentType: "application/json",
    		}).done(function(result) {	
    			console.log(result);
    		    if(result.status === "0")
    			{
    				let userinfo = document.getElementById('user-info');
    				let user = $($(userinfo).html());
    				var nouser = $('.user-a');
    				nouser.remove();
    				var parent = $('.user-div');
    				let user_name = user.find('#username');
    				let user_id = user.find('#UID');
    				let user_img = user.find('#userimg');
    				user_name.text(result.user_name);
    				user_id.text(result.user_id);
					user_ID = result.user_id;
    				user_img.css("background-image","url(" + result.user_img + ")");
    				parent.append(user);
    			}
				initPage();
    		}).fail(function(result) {
    		    alert("获取图片失败，请刷新网站");
    			});
    	}
    	function getInfo()
		{
		    $.ajax({
				method: "GET",
				url: "/getInfo",
				dataType: "json",
				contentType: "application/json",
			}).done(function(result) {
				console.log(result);
			    if(result.status === "0")
				{
				    document.getElementById('get_email').value=result.user_email
                    document.getElementById('get_des').value=result.user_des
                    document.getElementById('get_dep').value=result.user_dep
                    document.getElementById('get_name').innerHTML=result.user_name
                    document.getElementById('get_img').src=url(" + result.user_img + ")
				}
			}).fail(function(result) {
			    alert("获取信息失败，请刷新网站");
				});
		}
		function logout()
		{
			$.ajax({
				method: "POST",
				url: "/logout",
				dataType: "json",
				}).done(function(result) {
					console.log(result);
					if(result.status === '0')
					{
						let nouser = document.getElementById('no-user');
						let user = $($(nouser).html());
						console.log(user);
						var userinfo = $('.user-info');
						console.log(userinfo);
						userinfo.remove();
						var parent = $('.user-div');
						parent.append(user);
					}
				}).fail(function(result) {
					alert("登出失败，请重试");
			});
		}
    </script>
  </body>
</html>